<template>
  <div>
    <div>剩余: {{ rest }}</div>
    <button @click="onAll">全部</button>
    <button @click="onUndo">未完成</button>
    <button @click="onDone">已完成</button>
    <button @click="onClear">清除已完成</button>
  </div>
</template>

<script>
import evtBus from '../event-bus/todolist';

export default {
  computed: {
    rest () {
      return evtBus.list.filter(item => !item.isDone).length;
    },
  },
  methods: {
    // 全部
    onAll () {
      evtBus.$emit('全部');
    },
    // 未完成
    onUndo () {
      evtBus.$emit('未完成');
    },
    // 已完成
    onDone () {
      evtBus.$emit('已完成');
    },
    // 清除已完成
    onClear () {
      evtBus.$emit('清除已完成');
    },
  },
}
</script>

<style scoped>

</style>